<template>
  <div class="container">
    <!-- 轮播图区域 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <swiper :isfull="false" :lunbotu="lunboList" :imgurl="'src'"></swiper>
        </div>
      </div>
    </div>
    <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
    >
      <div class="ball" v-show="flag"></div>
    </transition>
    <!-- 商品购买区域 -->
    <div class="mui-card">
      <div class="mui-card-header">{{GoodsInfo.title}}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p class="price">
            市场价：
            <span style="margin-right:10px">
              <del>￥{{GoodsInfo.market_price}}</del>
            </span>
            销售价：
            <span
              style="font-size:16px;color:red;font-weight:bold"
            >￥{{GoodsInfo.sell_price}}</span>
          </p>
          <p>
            购买数量
            <!-- 由于goodsinfo是通过ajax动态获取回来的，但是ajax是异步请求，需要消耗时间，因此
                       ，可能会导致这种情况:nobox组件先于ajax渲染出来，此时，组件被渲染的时候。goodsinfo为空，此时传递到子组件中的
                       GoodsInfo.stock_quantity就是undefined
            -->
            <nobox :maxnum="GoodsInfo.stock_quantity"  @func="getCount($event)"></nobox>
          </p>
          <div>
            <mt-button type="primary" size="small">立即购买</mt-button>
            <mt-button type="danger" size="small" @click="addToCart">加入购物车</mt-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 商品参数区域 -->
    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>商品货号：{{GoodsInfo.goods_no}}</p>
          <p>库存情况：{{GoodsInfo.stock_quantity}}件</p>
          <p>上架时间：{{GoodsInfo.add_time | dateFilter}}</p>
        </div>
      </div>
      <div class="mui-card-footer btnarea">
        <!-- <router-link :to="'/home/goodsdesc/'+GoodsInfo.id">
          <mt-button type="primary" size="large" plain>图文介绍</mt-button>
        </router-link> -->
        <!-- 编程式导航 -->
        <mt-button type="primary" size="large" plain @click="goDesc">图文介绍</mt-button>
        <mt-button type="danger" size="large" plain @click="goComment">商品评论</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
import swiper from "../sub-component/Swiper.vue";
import nobox from "../sub-component/goodsinfo_nobox.vue";
import {mapMutations} from "vuex";

export default {
  data() {
    return {
      lunboList: [],
      GoodsInfo: {},
      flag:false,
      selectedCount:1
    };
  },
  created() {
    this.getlunbo(), this.getGoodsInfo();
  },
  methods: {
    ...mapMutations(['addToCar']),
    async getlunbo() {
      const { data } = await this.$http.get("/api/getthumimages/" + this.id);
      if (data.status === 0) return (this.lunboList = data.message);
      console.log(this.lunboList);
    },
    async getGoodsInfo() {
      const { data } = await this.$http.get("/api/goods/getinfo/" + this.id);
      if (data.status === 0) return (this.GoodsInfo = data.message[0]);
    },
    goDesc(){
        //点击按钮，跳往描述页
        //注意：在这个this组件身上，有this.$route和this.$router
        //this.$route是专门用来获取路由中参数的；
        //this.$router是专门用来实现编程式导航的
        this.$router.push('/home/goodsdesc/'+this.GoodsInfo.id);
    },
    goComment(){
      this.$router.push({name:'goodscomments',params:{id:this.GoodsInfo.id}})
    },
    addToCart(){
      this.flag=!this.flag;
      this.addToCar({id:this.id,count:this.selectedCount,selected:true,price:this.GoodsInfo.sell_price});
      // this.$store.commit('addToCar',{id:this.id,count:this.selectedCount})
    },
    beforeEnter(el){
      //入场动画开始之前
      el.style.transform="translate(0,0)";
    },
    enter(el,done){
      el.offsetWidth;
      //动态获取小球的横纵坐标；
      const ballPos=el.getBoundingClientRect();
      //动态获取徽标的横纵坐标【注意：这里获取徽标的位置和双向数据绑定没有关系，所以，可以直接使用普通的Dom操作元素。】
      //只要是浏览器页面中的元素，就算不在同一组件中也能通过Dom元素的方式获取
      const badegePos=document.getElementById('badge').getBoundingClientRect();
      console.log(ballPos,badegePos);
      const left=badegePos.left-ballPos.left;
      const top=badegePos.top-ballPos.top;
      //入场动画结束之后，小球的终止状态
      el.style.transform="translate("+left+"px,"+top+"px)";
      el.style.transition="all 1s cubic-bezier(.19,-0.24,.76,.04)";
      done();
    },
    afterEnter(el){
      //入场动画完成之后的回调函数
      this.flag=!this.flag;
    },
    getCount(count){
      console.log('数据：'+count);
      this.selectedCount=count;
    }
  },
  props: ["id"],
  components: {
    swiper,
    nobox
  }
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #eee;
  overflow: hidden;
}
.btnarea {
  flex-direction: column;
  button {
    margin-top: 15px;
  }
}
.ball {
  width: 15px;
  height: 15px;
  background-color: red;
  border-radius: 50%;
  position: absolute;
  z-index: 999;
  left: 139px;
  top: 370px;
  //将来小球要移动到的目标位置
  transform: translate(87px,250px);
}
</style>